<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
<title></title>
<jsp:include page="inc.jsp"></jsp:include>
      <style>
      #loading{
     	width: 1000px;
     	height: 700px;
     	margin-left: auto;
		margin-right: auto;
      }
     
     	#login{
     		width: 400px;
	    	height: 150px;
     	}
     	#header1{
	    		width: 100%;
	    		height: 150px;
	    	}
     	.titleimg1 img{
	    	  width: 80%;
		      height: 110px;
        	}
       .titleimg2 img{
        	width: 100%;
        	height: 110px;
        }
        #footerimg img{
        	width: 550px;
        	height: 300px;
        }
        }
     </style>

     <script src="//cdn.bootcss.com/jquery/1.6.4/jquery.min.js"></script>
     <script type="text/javascript">
     	function checkUserName(){
     		var userName=$("#userName")[0].value;

     		var spanUserName=document.getElementById("spanUserName");
     		if(userName[0]== null || userName[0] == ""){
					//提示信息					
					spanUserName.innerHTML = "请输入用户名！";
					spanUserName.style.color ="#D44950";
					//msg += "请输入姓名！\n"
					document.getElementById("userName").focus();
					//修改标志变量
					return false;
				}else{
					spanUserName.innerHTML="";
					//修改标志变量
					return true;
				}
     	}
     	
     	function checkPsw(){
			//密码非空验证
				var userPassword = document.getElementById("userPassword").value;
				
				//信息提示框
				var spanUserPsw = document.getElementById("spanUserPsw");
				if(userPassword == null || userPassword == ""){		
					
					//错误提示信息
					//提示信息					
					spanUserPsw.innerHTML = "请输入密码！";
					spanUserPsw.style.color ="#D44950";
					return false;
				}else{
					//验证通过  清空提示内容
					spanUserPsw.innerHTML = "";
					return true;
				}
		}
    function checkall(){
    	var ischeckUserName=checkUserName();
    	var ischeckPsw=checkPsw();
    	console.info(ischeckUserName);
    	console.info(ischeckPsw);
    	if(ischeckUserName&&ischeckPsw){
    		return true;
    	}else{
    		return false;
    	}
    }
 </script>
  </head>
     <body>
     	
     	<div id="loading">
     		

     	    <div class="bs-docs-grid">
     	    	<hr />
            <div id="header1">
              <div class="col-md-8 titleimg1"><img src="imgs/2016-08-23_211016.png" /> </div>
              <div class="col-md-4 titleimg2"><img src="imgs/new11.jpg" /> </div>
              <div class="panel panel-primary" align="center"><font face="宋体" size="5"><font face="impact"> —————</font>登&nbsp;录&nbsp;界&nbsp;面</font></div>
           </div>
     	
     	
     	
     	
	     	<div id="login" style="margin:30px 10px;" class="col-md-5" >
	     	<form class="form-horizontal"  action="LoginServlet" method="post" style="margin: 50px;">
       	<div class="form-group" >
       	  <label for="inputEmail3" class="col-sm-4 control-label"><font face="仿宋" size="4">用户名</font></label>
       	  <div class="col-sm-8">
       	    <input type="mystyle" class="form-control" id="userName" name="userName" placeholder="请输入用户名" onblur="checkUserName();">
       	  <span id="spanUserName"></span>
       	  </div>
       	</div>
      	 <div class="form-group">
      	   <label for="inputPassword3" class="col-sm-4 control-label"><font face="仿宋" size="4">密&nbsp;&nbsp;码</font></label>
       	  <div class="col-sm-8">
       	    <input type="password" class="form-control" id="userPassword" name="userPassword" placeholder="请输入密码" onblur="checkPsw();">
       	  <span id="spanUserPsw"></span>
       	  </div>
      	 </div>
      	 <!--<div class="form-group">
       	  <div class="col-sm-offset-2 col-sm-10">
         	  <div class="checkbox">
         	    <label>
         	      <input type="checkbox"> Remember me
         	    </label>
         	  </div>
        	 </div>
      	 </div>-->
      	 <div class="form-group">
      	 <div class="col-sm-4" >
          <label>
           	  <input type="radio" name="log" value="1" checked>
          	   <font size="2" face="宋体">管理员</font>
        	   </label>
                </div>
                <div class="col-sm-4" >
         	  <label>
          	   <input type="radio" name="log" value="2">
           	  <font size="2" face="宋体">学生</font>
         	  </label>
         	  </div>
         	  <div class="col-sm-4" >
         	  <label>
          	   <input type="radio" name="log" value="3">
           	  <font size="2" face="宋体">老师</font>
         	  </label>
       	  </div>
       	  </div>
       	  
      	 <div class="form-group">
        	 <div class="col-sm-offset-1 col-sm-4" >
        	   <button type="submit" class="btn btn-default" onclick="return checkall();"><font size="2">&nbsp;登&nbsp;&nbsp;&nbsp;录&nbsp;</font></button>
        	 </div>
        	 <div class="col-sm-offset-2 col-sm-4" >
        	   <button type="reset" class="btn btn-default"><font size="2"> &nbsp;重&nbsp;&nbsp;&nbsp;置&nbsp;</font></button>
        	 </div>
       	</div>
     	</form>    	
     	</div>
     	</div>
     	<div id="footerimg" class="col-md-6" style="margin: 20px 0px;"> <img src="imgs/f5e3004468ebcecb17720a4ce60559ee.jpg" /> </div>
     	
     	</div>  
     	
     	</div>  	

  </body>
</html>
